<template>
  <!-- 该组件用于假页面，表面为一个页面但实际上并无路由跳转 -->
  <van-popup
    v-if="state"
    v-model="state"
    class="hu-page"
    get-container="body"
    duration="0"
    :overlay="false"
  >
    <div v-resize="headerResize" class="hu-page-header">
      <slot name="header"></slot>
    </div>
    <div :style="changeStyle" class="hu-page-content">
      <slot name="default" v-if="!empty && !loading"></slot>
      <!-- 加载中状态 -->
      <van-loading class="hu-page-loading" v-if="loading" type="spinner" />
      <!-- 空状态 -->
      <van-empty
        :image="emptyImage"
        v-if="!loading && empty"
        :description="emptyText"
      />
    </div>
    <div v-resize="footerResize" class="hu-page-footer">
      <slot name="footer"></slot>
    </div>
  </van-popup>
</template>

<script>
export default {
  name: "HuPage",
  props: {
    // 使用该组件的父组件的name,必填
    comName: {
      type: String,
      default: "",
    },
    // 底边距
    paddingBottom: {
      type: [String, Number],
      default: "80",
    },
    // 是否禁止页面滚动
    noScroll: {
      type: Boolean,
      default: false,
    },
    // 是否处于加载状态
    loading: {
      type: Boolean,
      default: false,
    },
    // 是否为空
    empty: {
      type: [Boolean, String],
      default: false,
    },
    // 为空时的文字显示
    emptyText: {
      type: String,
      default: "暂无内容",
    },
    // 为空时的图片
    emptyImage: {
      type: String,
      default: "default",
    },
  },
  data() {
    return {
      state: false,
      headerHeight: 0, // 头部插槽内容高度
      footerHeight: 0, // 底部插槽内容高度
    };
  },
  computed: {
    changeStyle() {
      let style = {
        height: `calc(100vh - ${this.headerHeight}px - ${this.footerHeight}px)`,
        // backgroundColor: this.bgColor,
        paddingBottom: this.paddingBottom + "px",
        overflowY: this.noScroll ? "hidden" : "auto", // 是否禁止滚动
      };
      return style;
    },
  },

  methods: {
    // 打开
    open() {
      this.toggle(true);
    },
    // 关闭
    close() {
      this.toggle(false);
    },
    // 页面开关切换
    toggle(show) {
      this.state = show;
      if (this.state) {
        // 如果是打开组件  在面包屑导航最后添加一个记录
        this.$store.commit("SET_BREADCRUMBCOMPADD", this.comName);
      } else {
        // 关闭
        // 在面包屑导航中删除最后一个记录
        this.$store.commit("SET_BREADCRUMBCOMPDELETE");
      }
    },
    footerResize(el) {
      // el.height 为该元素高度，当该元素高度 >0 时修改页面可滚动区域的高度
      this.footerHeight = parseInt(el.height);
    },
    headerResize(el) {
      this.headerHeight = parseInt(el.height);
    },
  },
  watch: {
    //监听全局后退
    "$store.state.isReturn"(nd) {
      // 开关打开了
      if (nd) {
        // 从breadcrumbComp最后一个组件开始 关闭自己
        this.$store.dispatch("getLastBreadcrumbName").then((res) => {
          // 如果最后一个是自己
          // this.comName 为使用该组件的父组件的名称 name
          if (res == this.comName) {
            // 关闭弹框
            this.toggle(false);
          }
        });
      }
    },
  },

  components: {},
};
</script>

<style lang="less" scoped>
// 弹出框禁止滚动
.hu-page {
  overflow: hidden;
  font-size: 14px;
  width: 100%;
  height: 100%;
  background-color: @gray-1;
  .hu-page-content {
    overflow: auto;
  }
  .hu-page-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: @gray-1;
  }
  .hu-page-loading {
    text-align: center;
    margin-top: 10px;
  }
}
</style>
